<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dragdemo">
    <ul>
        <div class="trs" draggable="true">列表1</div>
        <div class="trs" draggable="true">列表2</div>
        <div class="trs" draggable="true">列表3</div>
        <div class="trs" draggable="true">列表4</div>
        <div class="trs" draggable="true">列表5</div>
    </ul>
    <div draggable="true">Draggable1</div>
    <div draggable="true">Draggable2</div>
    <div draggable="true">Draggable3</div>
    <div draggable="true">Draggable4</div>
</div>
<svg id="svg" width="464" height="320" style="border:solid 1px blue;"  draggable="true">

    <rect id="rect1" x="20" y="20" width="45" height="45"  draggable="true"
          style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>


</svg>

<button onclick="g_wasm.greet('a')">WebAssembly greet</button>
<script>
    let listText =""
    // 第一步：获取DOM节点 (这里我使用的时间冒泡，就不用给单独给每个div绑定事件了)
       var ul = document.querySelector('#dragdemo')
    //第二步：添加dragstart事件 (这里是拖拽前触发的时间，不要使用preventDefault阻止默认时间)
        ul.addEventListener('dragstart',function(event){
            event.dataTransfer.setData('drag_text',event.target.innerHTML)  //1.设置拖拽元素的DOM
        })
    // 第三步：添加dragover事件 (这个事件是必须添加的，不添加这个dragover事件，drop事件触发不了)
        ul.addEventListener('dragover',function(event){
            event.preventDefault() // ****************************必须声明的事件*****************************8
        })

    // 第四步：添加drop拖拽完成事件 (主要是监听完成拖拽的事件)
        ul.addEventListener('drop',function(event){
            event.preventDefault()
            listText =event.target.innerHTML  //3.获取到目标元素的DOM
            const drag_text =event.dataTransfer.getData('drag_text') //2.获取到拖拽元素的DOM
            event.target.innerHTML=drag_text  //4.将目标元素更改为拖拽元素
        })
        ul.addEventListener('dragend',function(event){
            event.preventDefault()
            event.target.innerHTML=listText

        })

   </script>

<script>

    var cardList = [
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250},
        {size:{width:45,height:45},count:250}
    ];

    //

    var usedPlaceList = [[{},{}],[]]


</script>
<!--<script type="module" src="/static/wasm/makeup/makeup.js?t=a" >-->

<!--    console.log("1&#45;&#45;&#45;&#45;")-->
<!--    //import  Hello from "/static/vue/templates/Hello3.js?t=22444"-->
<!--    //import * as wasm from "/static/wasm/makeup/makeup.js";-->
<!--    console.log("wasm",wasm)-->
<!--    //wasm.greet();-->
<!--    console.log("2&#45;&#45;&#45;&#45;")-->
<!--</script>-->

<!--<script>-->
<!--  /**-->
<!--   * @param {String} path wasm 文件路径-->
<!--   * @param {Object} imports 传递到 wasm 代码中的变量-->
<!--   */-->
<!--  function loadWebAssembly (path, imports = {}) {-->
<!--    return fetch(path) // 加载文件-->
<!--            .then(response => response.arrayBuffer()) // 转成 ArrayBuffer-->
<!--            .then(buffer => WebAssembly.compile(buffer))-->
<!--            .then(module => {-->
<!--              imports.env = imports.env || {}-->

<!--              // 开辟内存空间-->
<!--              imports.env.memoryBase = imports.env.memoryBase || 0-->
<!--              if (!imports.env.memory) {-->
<!--                imports.env.memory = new WebAssembly.Memory({ initial: 256 })-->
<!--              }-->

<!--              // 创建变量映射表-->
<!--              imports.env.tableBase = imports.env.tableBase || 0-->
<!--              if (!imports.env.table) {-->
<!--                // 在 MVP 版本中 element 只能是 "anyfunc"-->
<!--                imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })-->
<!--              }-->

<!--              // 创建 WebAssembly 实例-->
<!--              return new WebAssembly.Instance(module, imports)-->
<!--            })-->
<!--  }-->
<!--  // 加载wasm文件-->
<!--  loadWebAssembly('/static/wasm/makeup/makeup_bg.wasm')-->
<!--          .then(instance => {-->
<!--            //调用c里面的方法-->
<!--            const greet = instance.exports.greet-->
<!--            greet();-->
<!--          })-->

<!--</script>-->
<script>
    var g_wasm=null;
</script>
<script type="module">
     import init, * as wasm  from "/static/wasm/makeup/makeup.js";
     init().then(() => {
        console.log(init,wasm)
     });
      g_wasm=wasm
</script>

<!--<script type="module">-->
<!--     import * as wasm  from "/static/wasm/makeup/makeup.js";-->

<!--      //g_greet = greet;-->
<!--      g_wasm=wasm-->
<!--</script>-->
</body>
</html>